<template>
  <div>
    <el-row>
      <el-col :span="8">
        <div id="myChart1" style="width: 100%;height: 500px">

        </div>
      </el-col>
      <el-col :span="8">
        <div id="myChart2" style="width: 100%;height: 500px">

        </div>
      </el-col>
      <el-col :span="8">
        <div id="myChart3" style="width: 100%;height: 500px">

        </div>
      </el-col>
      <el-col :span="12">
        <div id="myChart4" style="width: 100%;height: 500px">

        </div>
      </el-col>
      <el-col :span="12">
        <div id="myChart5" style="width: 100%;height: 500px">

        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import request from "@/utils/request";
import * as echarts from "echarts"

// import axios from 'axios';

export default {
  name: "Home",
  data() {
    return {
      draw1:[],
      draw2:[],
      draw3:[],
      draw4:[],
      draw5:[],

    }
  },
  mounted() {
    request.post('stat/statType',{},).then(res=>{
      if(res.msg == 'success'){
        this.draw1 = res.records1;
        this.draw2 = res.records2;
        this.draw3 = res.records3;
        this.draw4 = res.records4;
        this.draw5 = res.records5;
        this.drawLine1();
        this.drawLine2();
        this.drawLine3();
      }else{
        this.$message.error("error")
      }

    })

  },
  methods: {
    drawLine1() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById('myChart1'))
      let option = {
        title: {
          text: '各个类别工具有多少种',
          // subtext: '虚拟数据',
          left: 'left'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          trigger: 'item',
          left: 'center'
        },
        toolbox: {
          show: true,
          feature: {
            mark: {show: true},
            dataView: {show: true, readOnly: false},
            restore: {show: true},
            saveAsImage: {show: true}
          }
        },
        series: [
          {
            name: '用户比例',
            type: 'pie',
            radius: [50, 150],
            center: ['50%', '60%'],
            roseType: 'area',
            itemStyle: {
              borderRadius: 8
            },
            data: []
          }
        ]
      }
      this.draw1.forEach(item => {
        option.series[0].data.push({name: item.type, value: item.num})
      })
      // 绘制图表
      myChart.setOption(option);
    },
    drawLine2() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById('myChart2'))
      let option = {
        title: {
          text: '统计各个供应商供应工具的数量',
          // subtext: '虚拟数据',
          left: 'left'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          trigger: 'item',
          left: 'center'
        },
        toolbox: {
          show: true,
          feature: {
            mark: {show: true},
            dataView: {show: true, readOnly: false},
            restore: {show: true},
            saveAsImage: {show: true}
          }
        },
        xAxis: {
          type: 'category',
          data: []
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            type: 'line',
            // radius: [50, 150],
            // center: ['50%', '60%'],
            // roseType: 'area',
            // itemStyle: {
            //   borderRadius: 8
            // },
            data: []
          }
        ]
      }
      this.draw2.forEach(item => {
        option.xAxis.data.push(item.supply)
        option.series[0].data.push(item.num)
      })
      // 绘制图表
      myChart.setOption(option);
    },
    drawLine3() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById('myChart3'))
      let option = {
        title: {
          text: '统计各个类别工具的总数s',
          // subtext: '虚拟数据',
          left: 'left'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          trigger: 'item',
          left: 'center'
        },
        toolbox: {
          show: true,
          feature: {
            mark: {show: true},
            dataView: {show: true, readOnly: false},
            restore: {show: true},
            saveAsImage: {show: true}
          }
        },
        xAxis: {
          type: 'category',
          data: []
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            type: 'bar',
            // radius: [50, 150],
            // center: ['50%', '60%'],
            // roseType: 'area',
            // itemStyle: {
            //   borderRadius: 8
            // },
            data: []
          }
        ]
      }
      this.draw3.forEach(item => {
        option.xAxis.data.push(item.type)
        option.series[0].data.push(item.num)
      })
      // 绘制图表
      myChart.setOption(option);
    }
  }
}
</script>

<style scoped></style>
